<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			/* 画圆 */
			#d1{
				border-radius: 50%;
				width: 500px;
				height: 500px;
				background-color: #ff0000;
				/* 微调定位 */
				position:relative;
				left: 10px;
				top: 10px;
			}
			#d2{
				border-radius: 50%;
				width: 400px;
				height: 400px;
				background-color: #74ff17;
				/* 定位属性：元素直接定位到页面上 */
				/* 相对定位 */
				position:relative;
				left: 50px;/* x轴 横向 */
				top: 50px;/* y轴 纵轴 */
			}
			#d3{
				border-radius: 50%;
				width: 300px;
				height: 300px;
				background-color: #ff1084;
				position:relative;
				left: 49px;/* x轴 横向 */
				top: 50px;/* y轴 纵轴 */
			}
			/* 棍子 */
			p{
				width: 40px;
			    height: 500px;
				background-color: #ffe29e;
				/* 倾斜  转换属性：旋转值 */
				transform:rotate(-32deg);
				position:relative;
				left: 503px;/* x轴 横向 */
				top: -82px;/* y轴 纵轴 */
			}
		</style>
	</head>
	<body>
		<!-- 画三个圆 -->
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		<!-- 画棍 -->
		<p></p>
	</body>
</html>